移动端实现裁剪图片生成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. Redis主从复制之哨兵模式(sentinel)

    介绍:反客为主的自动版,能够后台监控主机是否故障,如果故障了根据投票数自动将从库转换为主库 调整结构:6379带着80.81 自定义的/myredis目录下新建sentinel.conf文件,名字绝不 ...

  2. vscode React编程配置

    2.添加RN开发插件 React Native Tools:微软官方出的ReactNative插件,非常好用Reactjs code snippets:react的代码提示,如componentWil ...

  3. OpenCV 学习笔记（1-1）opecv3.41及其扩展库在VS2015下配置

    其他正常 opencv_aruco341.lib opencv_bgsegm341.lib opencv_bioinspired341.lib opencv_calib3d341.lib opencv ...

  4. codeblocks异常退出

    ExceptionAn exception has been raised! The application encountered an error atC:\CB1312\src\sdk\conf ...

  5. 洛谷 P2634 [国家集训队]聪聪可可-树分治(点分治，容斥版) +读入挂+手动O2优化吸点氧才过。。。-树上路径为3的倍数的路径数量

    P2634 [国家集训队]聪聪可可 题目描述 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电脑)……遇到这种问题,一 ...

  6. 【luoguP5490】【模板】扫描线

    求\(n\)个矩形的面积并,可以用线段树维护一条垂直于\(y\)轴的直线上被矩形覆盖的长度有多少长,将直线从左往右扫一遍,遇到矩形左边界就+1,遇到右边界就-1,不为\(0\)的位置就表示没有覆盖 不 ...

  7. UmiJS可插拔的企业级 react 应用框架，配合ant-design-pro使用

    入门非常简单 # 安装 $ yarn global add umi # 或者 npm install -g umi # 新建应用 $ mkdir myapp && cd myapp # ...

  8. 为arm-linux开发板挂载基于nfs的根文件系统

    linux4.14内核,首先设置kernel的bootargs,在make menuconfig中有三种方式来配置: 第一种方式为如果uboot中设置了bootargs环境变量,就采用uboot的bo ...

  9. TensorFlow 报错 ValueError: Can't load save_path when it is None.

    原因 : 模型还未生成出来 , 此时你去检测的生成完毕的模型 , 模型呢 ? 还没生成 . 模型还没生成就引用了为什么不报错 ? 解决办法 : 当前情况不要以为是你的程序有 bug , 而是你的模型还 ...

  10. 《京东上千页面搭建基石——CMS前后端分离演进史》阅读笔记

    一.背景 CMS即内容管理系统,目的是用于快速进行网站建设或者网页开发. 对于京东网站部门来说,CMS核心目的是用来快速开发和上线各种页面,诸如各种垂直频道页. 二.CMS核心目的 进行数据和模板的统 ...