移动端实现裁剪图片生成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编码就可以解决 ...

随机推荐

[nodemon] app crashed - waiting for file changes before starting...
慕课网前端工程师晋升课程 Vue全家桶+SSR+Koa2全栈开发美团网视频里用 npx create-nuxt-app mt-app创建项目后,不能使用import ...from....跟着老师修 ...
51nod1814 Clarke and string
[传送门] 直接想最暴力的做法就是正解了.每次询问都把两个串的回文树建出来,然后再两棵树上同时dfs,经过相同的节点答案就加一.遇到一个不存在的就退出.再把询问记忆化一下就OK了.复杂度是 $O(n ...
continue语句：编程把100-300之间的能被25整除的数输出
#include<stdio.h>void main(){ int n; for(n=100;n<=300;n++) { if(n%25!=0) continue; printf(& ...
darw colorful more
Docker网络配置、Docker部署分布式项目
目标 1.Docker网络配置 2.Docker部署SpringCloud项目 Docker网络配置 Docker网络模式介绍 Docker在创建容器时有四种网络模式:bridge/host/cont ...
shell札记
1.echo变量名的技巧 #! /bin/bash read -p "please input value a: " a declare -i ai=a echo -e " ...
AGC010
AGC010 A [过水已隐藏] B 这题推完了还是不会/kk真的毒瘤考虑每次会减少的总和是$n(n+1)/2$,用原来的和除以这个可以得到操作次数$m$(不是整数无解) 再考虑相邻两个数\ ...
【BigData】Java基础_终端输入2个数字并求和
1.需求描述在终端输入2个数字,然后根据输入的数字求和 2.实现代码 package cn.test.logan; import java.util.Scanner; public class Te ...
Mongoose 索引
Mongoose 索引介绍索引是对数据库表中一列或多列的值进行排序的一种结构,可以让我们查询数据库变得更快(如果有些字段是用不着的就不要设置索引).MongoDB 的索引几乎与传统的关系型数据库一 ...
cocos Uniforms值的赋值
cocos Uniforms值的赋值举个void Renderer::drawBatchedTriangles()的渲染: //Start drawing verties in batch for( ...

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

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

随机推荐

热门专题