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

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

IOS小彩虹2021-07-13 14:44:46120A+A-

场景

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

参数说明

参数 参数类型 说明
file Object 必选 文件对象

render(canvas, options, callback)

渲染 canvas

emiyaInstacne.render(canvasEl, {
    width: 300,
    quality: .8
}, function(response) {
    console.log(response);
});

response 返回格式如下:

{
    base64: '', // 修正过后图片的 base64 值
    width: 300, // 画布宽度
    height: 300 // 画布高度
}

参数说明

参数 参数类型 说明
canvasEl HTMLElement 必选 需要渲染的canvas元素
options Object 必选 设置画布的一些参数 width 画布宽度 quality 图片质量,范围在 0 - 1 之间,默认值为 0.8
callback Function 可选 回调函数,返回了图片的 base64 值,与一些 canvas 的参数

github地址:github.com/Saberizatio…

觉得还不错就给个 star 呗~

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们