You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
drawCanvas(){constcanvas=document.getElementById('a3');constcontext=canvas.getContext('2d');context.clearRect(0,0,480,480);constimageBg=newImage();constimageHeadBg=newImage();imageBg.setAttribute('crossOrigin','anonymous');imageHeadBg.setAttribute('crossOrigin','anonymous');constimgList=[];functionallImgLoad(resolve){if(imgList.length===2){// 绘制背景context.drawImage(imageBg,0,0,480,480);context.drawImage(imageHeadBg,0,0,480,480);resolve(canvas.toDataURL('image/jpeg'));}}imageBg.src=this.picUrl;imageHeadBg.src=this.selectCover;returnnewPromise((resolve)=>{imageBg.onload=()=>{console.log('image1 has loaded');imgList.push(1);allImgLoad(resolve);};imageHeadBg.onload=()=>{console.log('image2 has loaded');imgList.push(1);allImgLoad(resolve);};});},
基于 AlloyCrop 的图片手势缩放、裁剪业务实践
最近经常接到活动页面需要给用户定制化图片的需求,于是对之前所做过的图片裁剪业务功能、踩过的一些坑做一个总结梳理,希望对大家有参考价值。
需求描述
我们先来看一下整体的需求功能:
功能实现
input
标签调用原生的拍照、相册功能。body
底部引入后即可在Vue
中直接调用:AlloyCrop
后发现所展示的 UI 样式与我们设计图中的不一致,查看文档后也没发现有配置可以自定义样式,于是就直接使用chrome
的dom
查看工具,找到对应的节点获取到类名后进行样式覆盖即可。canvas
进行绘制,再通过canvas.toDataURL
导出我们需要的图片:遇到的问题
IOS 拍照后图片旋转 90 度问题
canvas
旋转成符合我们预期的方向。Orientation
属性,就引入了一个 40K 的库,查看源码后发现其中还包含了很多我们不需要的图片处理方法,于是最后找到了一个精简版的函数,使用DataView
和readAsArrayBuffer
就足以满足我们的需求:Orientation
属性含义如下:canvas
进行旋转图片处理:画布导出结果为空的问题
canvas.toDataURL
一直返回的是"data:,"
导致获取图片为空的现象。canvas
尺寸大小超出了 webview 可视区的大小。然而不同的 webview 中maximum canvas size
是不一样的,最后通过让截图区域始终小于可视区宽高,这个问题得以解决。总结
BigoLive 营收作为一个面向全球的直播平台,拥有庞大的用户基数。和国内蒸蒸日上的互联网环境不同,很多海外用户的操作系统、网络环境仍处在中低端水平。各种终端机型、复杂的代码运行环境、网络环境都对前端开发提出了更大的挑战。我们需要在完成基础的业务功能上不断兼容更多的用户群体。
The text was updated successfully, but these errors were encountered: