上传图片canvas生成H5

发布于 2020-05-20  35 次阅读


2020.05.20

前两天上线一个上传本地照片canvas自定义生成图片的H5

可预览:

用到了插件  jquery.photoClip.js

点我下载

其中依赖的缩放插件iscroll-zoom.js 版本要选择 v5.2.0,低版本移动端缩放有bug,不够灵敏。

配置PhotoClip的时候,以下必须存在,否则组件配置会不成功。分别为 id=”file”的控件的选择器或者DOM对象,id=”view”的显示截取后图像的容器的选择器或者DOM对象,id=”clipButton”的确认截图按钮的选择器或者DOM对象。

js中:

var clipArea = new bjj.PhotoClip(“#clipArea”, {
size: [${width}, ${height}],// 截取框的宽和高组成的数组。默认值为[260,260]
outputSize: [${width}, ${height}], // 输出图像的宽和高组成的数组。默认值为[0,0],表示输出图像原始大小
outputType: “jpg”, // 指定输出图片的类型,可选 “jpg” 和 “png” 两种种类型,默认为 “jpg”
file: “#file”, // 上传图片的<input type=”file”>控件的选择器或者DOM对象
view: “#view”, // 显示截取后图像的容器的选择器或者DOM对象
ok: “#clipBtn”, // 确认截图按钮的选择器或者DOM对象
loadStart: function() {
// 开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入
$(‘.cover-wrap’).fadeIn();
console.log(“照片读取中”);
},
loadComplete: function() {
// 加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入
console.log(“照片读取完成”);
},
//loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入
clipFinish: function(dataURL) {
// 裁剪完成的回调函数。this指向图片对象,会将裁剪出的图像数据DataURL作为参数传入
$(‘.cover-wrap’).fadeOut();
$(‘#view’).css(‘background-size’,’100% 100%’);
console.log(dataURL); //输出图像base64
}
});

我用的低版本中photoClip.js配置略微有所不同,裁剪完成回调函数是:

done : function ( ) {

}

配置完这些基本上使用功能没什么大问题了,最后裁剪完成的回调函数,会把图像数据DataURL作为参数传入,存储裁剪完的图像时,可以先把Base64图像数据转化为图片文件然后在进行存储。