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

MAX_zuo 发布于2019-08-22 16:50 / 2493人阅读

摘要：场景解决在移动端拍照，用绘图出现图片逆时针旋转度的问题。在高清屏与屏下绘图模糊的问题。如下图就用我老婆来做模特了下图是拍照过后渲染在画布上的图片，很明显未经处理过的图片，逆时针旋转了度，并且图片很模糊。注此组件下的必须待组件初始完毕后使用。

场景

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

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

如下图：

就用我老婆来做模特了~

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

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

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

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

示例

点击在线预览demo

或者扫描二维码查看

使用方法

方法说明

通过 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地址：https://github.com/Saberization/emiya-canvas

觉得还不错就给个 star 呗~

GPU服务器云服务器 iOS与安卓互通语音问题 ios模糊匹配 ios webrtc模糊问题解决

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94702.html

Canvas 在高清屏下绘制图片变模糊的解决方法

摘要：之前我在上回答过绘制图片模糊的问题，但是可能是由于我给出的答案过于简略，加上答案中的链接已经失效，很多人反映这种办法并不好使。前提条件假设我们要在中绘制一张的图片，并且要保证它在高清屏中不模糊。之前我在 SF 上回答过「html5 canvas绘制图片模糊的问题」，但是可能是由于我给出的答案过于简略，加上答案中的 demo 链接已经失效，很多人反映这种办法并不好使。但是我在给出答案之...

wind3110991 2019-08-21 10:39 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

zhaochunqi 2019-08-01 17:43 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

GHOST_349178 2019-08-21 16:51 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

Galence 2019-08-30 15:53 评论0 收藏0