700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > emiya-canvas.js 解决ios下拍照倾斜与canvas高清屏下绘图模糊问题

emiya-canvas.js 解决ios下拍照倾斜与canvas高清屏下绘图模糊问题

时间:2023-03-07 15:28:27

相关推荐

emiya-canvas.js 解决ios下拍照倾斜与canvas高清屏下绘图模糊问题

场景

解决在移动端拍照,用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呗~

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。