移动端实现裁剪图片生成base64图片(可缩放)

移动端实现裁剪图片生成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" />

<include file="commonheader" />
<link href="/croppermaster/dist/cropper.css" rel="stylesheet">
<style type="text/css">

</style>
</head>

<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图片(可缩放)的更多相关文章

js 选择图片生成base64数据
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...
利用cropper插件裁剪本地图片，然后将裁剪过后的base64图片上传至七牛云空间
现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...
生成base64图片验证码
github.com/mojocn/base64Captcha func GetCaptcha(c *gin.Context){ driver := base64Captcha.NewDriverDi ...
把图片生成Base64字符串
public class ImgeUtils { public static String img2String(BufferedImage img,String type){ String imgS ...
图片与Base64的转换
图片转为Base64 // 图片转化成base64字符串 public static String GetImageStr() {// 将图片文件转化为字节数组字符串,并对其进行Base64编码处理 ...
js小工具---本地图片转换为base64编码数据
今天用jmeter对图片对比进行性能测试,post请求为json请求,图片为Base64编码后的图片数据.所以需要将一张本地图片生成base64编码,找到一个js小工具,记录在这儿便于以后复用. 效果 ...
发布一个自己做的图片转Base64的软件，Markdown写文章时能用到
markdownpic 介绍 Markdown编辑时图片生成base64 软件架构使用了.netcore winform框架安装教程直接运行即可使用说明拖拽图片文件双击选择文件复制粘贴图 ...
第二百七十节，Tornado框架-生成验证码图片，以及验证码结合Session验证
Tornado框架-生成验证码图片,以及验证码结合Session验证第一.生成验证码图片生成验证码图片需要两个必须模块 1.python自带的random(随机模块) 2.Pillow()图像处 ...
JS 图片转Base64
JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决 ...

随机推荐

Python高级函数--filter
def is_palindrome(n): return str(n) == str(n)[::-1] #前两个‘:’表示整个范围,‘-’表示从后面,‘1’表示数据间隔 output = filter ...
MongoDB Shell db.runCommand
db.runCommand()示例我们使用MongoDB Shell登录到mongos,添加Shard节点 [root@100 shard]# /usr/local/mongoDB/bin/mong ...
OKR案例——不同类型的OKR实例
OKR是一种能将团队调动起来一起向着一个方向去努力的绝佳目标管理法,它让我们的团队去挑战自己的极限,去实现更大的价值,去将我们的战略最完美的转化为成果. 然而,想要让OKR在我们的团队中发挥作用,制定 ...
python函数 | 三元运算
三元运算符就是在赋值变量的时候,可以直接加判断,然后赋值格式: [on_true] if [expression] else [on_false] 三元运算只适用于简单的if else判断,再多一层 ...
Vue的数据双向绑定原理——Object-defineProperty
一.定义 ①方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ②vue.js的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截 ...
在Linux下配置git并设置远程仓库
自己常在云服务器上进行代码的编写,为了更方便的保存工作和管理,便使用了git这个版本管理工具来管理.下面介绍整个服务的配置过程. git的下载安装: 使用以下命令,回车即可,中间过程会有一个按y回车的 ...
div模拟textarea且高度自适应
需求我们知道文本超出 textarea 高度后,textarea 就会出现滚动条,需求就是让 textarea 高度跟随文本高度变化,屏蔽滚动条,原来做过用js去监听文本行数,然后改变文本框的高度, ...
2019.10.1 qbxt模拟题
第一题考虑树上$DP$,f[i][j][0/1]表示以$i$为根的子树,入读为零点的个数为$j$,点$i$的入度为$0$/不为$0$时的方案数转移的时候考虑$u$的一个 ...
js字符串连接
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ...
数据结构之LinkList
1.结构: 2.Link代码: public class Link { public int iData; public double dData; public Link next; public ...

移动端实现裁剪图片生成base64图片(可缩放)

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

随机推荐

热门专题