移动端实现裁剪图片生成base64图片(可缩放)
<pre>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>{$title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<!-- Link Swiper's CSS -->
<include file="commonheader" />
<link href="/croppermaster/dist/cropper.css" rel="stylesheet">
<style type="text/css">

</style>
</head>

<body>
<div class="box" style="width:100%;height:100%; position: absolute;left:0px; top:0px; z-index: 9999;background: #000;">
<img class="image" src="/croppermaster/dist/1.jpg">
<div class="caijian" style="width:80px; height:30px; line-height: 30px; text-align: center; background: #0ac2ff; border-radius:10px; position: absolute;right:30px; bottom: 30px; color: #FFF;">确定</div>
<div class="quxiaocaijian" style="width:80px; height:30px; line-height: 30px; text-align: center; background: #0ac2ff; border-radius:10px; position: absolute;left:30px; bottom: 30px; color: #FFF;">取消</div>
<div style="width:100%; height: auto;overflow: hidden;">
<img style="width:30%;" class="showpic" src="" alt="">
</div>
</div>

<include file="commonfooter" />
<script src="/croppermaster/dist/cropper.js"></script>
<script type="text/javascript">
$(function() {
$('.image').cropper({
aspectRatio: 9 / 12,
viewMode: 1,
crop: function(e) {
// console.log(e);
}
});

//裁剪完压缩方法
$('.caijian').on('click', function() {
var result = $('.caijianpic').cropper("getCroppedCanvas", {
width: 750,
height: 1000
});

var base64img = result.toDataURL("image/jpg");
$('.showpic').attr('src', base64img);
})
$('.quxiaocaijian').on('click', function() {
$('.image').cropper("destroy")
})

})
</script>
</body>

</html>
</pre>

ps:这个案例是裁剪中状态的

移动端实现裁剪图片生成base64图片(可缩放)的更多相关文章

  1. js 选择图片生成base64数据

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. 利用cropper插件裁剪本地图片，然后将裁剪过后的base64图片上传至七牛云空间

    现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...

  3. 生成base64图片验证码

    github.com/mojocn/base64Captcha func GetCaptcha(c *gin.Context){ driver := base64Captcha.NewDriverDi ...

  4. 把图片生成Base64字符串

    public class ImgeUtils { public static String img2String(BufferedImage img,String type){ String imgS ...

  5. 图片与Base64的转换

    图片转为Base64 // 图片转化成base64字符串 public static String GetImageStr() {// 将图片文件转化为字节数组字符串,并对其进行Base64编码处理 ...

  6. js小工具---本地图片转换为base64编码数据

    今天用jmeter对图片对比进行性能测试,post请求为json请求,图片为Base64编码后的图片数据.所以需要将一张本地图片生成base64编码,找到一个js小工具,记录在这儿便于以后复用. 效果 ...

  7. 发布一个自己做的图片转Base64的软件，Markdown写文章时能用到

    markdownpic 介绍 Markdown编辑时图片生成base64 软件架构 使用了.netcore winform框架 安装教程 直接运行即可 使用说明 拖拽图片文件 双击选择文件 复制粘贴图 ...

  8. 第二百七十节，Tornado框架-生成验证码图片，以及验证码结合Session验证

    Tornado框架-生成验证码图片,以及验证码结合Session验证 第一.生成验证码图片  生成验证码图片需要两个必须模块 1.python自带的random(随机模块) 2.Pillow()图像处 ...

  9. JS 图片转Base64

    JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决 ...

随机推荐

  1. GeoIP简介与资源，定位经纬度，获取用户IP

    所谓GeoIP,就是通过来访者的IP,定位他的经纬度,国家/地区,省市,甚至街道等位置信息.这里面的技术不算难题,关键在于有个精准的数据库.有了准确的数据源就奇货可居赚点小钱,可是发扬合作精神,集体贡 ...

  2. tomcat和apache的区别--http server vs application server

    1. Apache是web服务器,Tomcat是应用(java)服务器,它只是一个servlet容器,是Apache的扩展. 2. Apache和Tomcat都可以做为独立的web服务器来运行,但是A ...

  3. mysql使用过程中出现的问题总结

    1.mysql命令窗口输入密码后窗口闪退 密码输入错误.(其他暂不清楚) 2. 出现这个错误的原因是,数据库的编码格式不一致. https://www.cnblogs.com/lsr-flying/p ...

  4. 洛谷 P1120 小木棍 题解

    每日一题 day54 打卡 Analysis 一,管理员已经在题目中告诉你输入时去掉长度大于50的木棍. 二,想好搜索什么.很明显我们要枚举把哪些棍子拼接成原来的长棍,而原始长度(原来的长棍的长度)都 ...

  5. ava 类似jest snapshot 功能试用

    ava也提供了类似jest 的snapshot 测试,可以用来方便的测试web 组件,以下是一个简单的试用, 同时包含了自己碰到问题,以及解决方法,以及一些参考链接 使用typescript 以及ts ...

  6. golang 几个好用的cli package

    cli 开发在golang 的软件开发中占用很大,同时开源的比较好用的cli也很多,以下是整理的几个cli github.com/spf13/cobra 这个比较有名了, 好多框架都使用了这个 以下是 ...

  7. Reactive Extensions (Rx) 入门(2) —— 安装 Reactive Extensions

    译文:https://blog.csdn.net/fangxing80/article/details/7581937 原文:http://www.atmarkit.co.jp/fdotnet/int ...

  8. Problem 1 珠江夜游 (cruise .cpp)———2019.10.6

    Problem 1 珠江夜游 (cruise.cpp)[题目描述]小 Z 放假后难得来一趟广州游玩,当然要吃遍广州各路美食小吃然后再到珠江新城看看远近闻名的小蛮腰啦!可当小 Z 一路吃吃吃以后,天渐渐 ...

  9. layui上传文件组件(前后端代码实现)

    我个人博客系统上传特色图片功能就是用layui上传文件组件做的.另外采用某个生态框架,尽量都统一用该生态框架对应的解决方案,因为这样一来,有这么几个好处?1.统一而不杂糅,有利于制定相应的编码规范,方 ...

  10. Java设计模式之builder模式

    Java设计模式之builder模式 今天学mybatis的时候,知道了SQLSessionFactory使用的是builder模式来生成的.再次整理一下什么是builder模式以及应用场景. 1. ...