场景

解决在移动端拍照，用 canvas 绘图出现图片逆时针旋转 90 度的问题。

canvas 在高清屏与retina屏下绘图模糊的问题。

如下图：

就用我老婆来做模特了~

下图是拍照过后渲染在画布上的图片，很明显未经处理过的图片，逆时针旋转了 90 度，并且图片很模糊。

通过使用 emiya-canvas.js 处理过后的图片，修正了正确的图片方向，并且图片也变得清晰了。

在来一张是从相册选择的图片来看一下：

未修正的图片很模糊，修正过后的图片就清晰了许多。

示例

或者扫描二维码查看

使用方法

方法说明

通过 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地址：

觉得还不错就给个 star 呗~