场景
解决在移动端拍照,用canvas
绘图出现图片逆时针旋转90
度的问题。
canvas
在高清屏与retina屏下绘图模糊的问题。
如下图:
就用我老婆来做模特了~
下图是拍照过后渲染在画布上的图片,很明显未经处理过的图片,逆时针旋转了90
度,并且图片很模糊。
通过使用emiya-canvas.js
处理过后的图片,修正了正确的图片方向,并且图片也变得清晰了。
在来一张是从相册选择的图片来看一下:
未修正的图片很模糊,修正过后的图片就清晰了许多。
示例
点击在线预览demo
或者扫描二维码查看
使用方法
<!-- 直接引入源文件即可 --><script src="emiya-canvas.js"></script>复制代码
方法说明
通过new
创建一个EmiyaCanvas
的实例,创建过程当中做了一些初始化组件的操作。
const emiyaInstacne = new EmiyaCanvas();复制代码
注:此组件下的API
必须待组件初始完毕后使用。
setFile(file)
设置图片文件对象
emiyaInstacne.setFile(file);复制代码
参数说明
render(canvas, options, callback)
渲染canvas
emiyaInstacne.render(canvasEl, {width: 300,quality: .8}, function(response) {console.log(response);});复制代码
response返回格式如下:
{base64: '', // 修正过后图片的 base64 值width: 300, // 画布宽度height: 300 // 画布高度}复制代码
参数说明
github地址:/Saberizatio…
觉得还不错就给个star
呗~