脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">场景</h2> <p>解决在移动端拍照,用 <code>canvas</code> 绘图出现图片逆时针旋转 <code>90</code> 度的问题。</p> <p><code>canvas</code> 在高清屏与retina屏下绘图模糊的问题。</p> <p><strong>如下图:</strong></p> <blockquote><p>就用我老婆来做模特了~</p></blockquote> <p>下图是拍照过后渲染在画布上的图片,很明显未经处理过的图片,逆时针旋转了 <code>90</code> 度,并且图片很模糊。</p> <p>通过使用 <code>emiya-canvas.js</code> 处理过后的图片,修正了正确的图片方向,并且图片也变得清晰了。</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000014657178?w=750&amp;h=1334" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>在来一张是从相册选择的图片来看一下:</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000014657179?w=750&amp;h=1334" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>未修正的图片很模糊,修正过后的图片就清晰了许多。</p> <h2 id="articleHeader1">示例</h2> <p><a href="http://guotq.get.vip/emiya-canvas/showcase.html" rel="nofollow noreferrer" target="_blank">点击在线预览demo</a></p> <p>或者扫描二维码查看</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000014657180?w=520&amp;h=520" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <h2 id="articleHeader2">使用方法</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!-- 直接引入源文件即可 --><br /> <script src=&quot;emiya-canvas.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-comment">&lt;!-- 直接引入源文件即可 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"emiya-canvas.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h2 id="articleHeader3">方法说明</h2> <p>通过 <code>new</code> 创建一个 <code>EmiyaCanvas</code> 的实例,创建过程当中做了一些初始化组件的操作。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const emiyaInstacne = new EmiyaCanvas();" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> emiyaInstacne = <span class="hljs-keyword">new</span> EmiyaCanvas();</code></pre> <p>注:此组件下的 <code><a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a></code> 必须待组件初始完毕后使用。</p> <h3 id="articleHeader4">setFile(file)</h3> <p>设置图片文件对象</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="emiyaInstacne.setFile(file);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;">emiyaInstacne.setFile(file);</code></pre> <p><strong>参数说明</strong></p> <table> <thead> <tr> <th align="left">参数</th> <th align="center">参数类型</th> <th align="left">说明</th> </tr> </thead> <tbody> <tr> <td align="left">file</td> <td align="center">Object</td> <td align="left"> <code>必选</code> 文件对象</td> </tr> </tbody> </table> <h3 id="articleHeader5">render(canvas, options, callback)</h3> <p>渲染 <code>canvas</code></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="emiyaInstacne.render(canvasEl, { width: 300, quality: .8 }, function(response) { console.log(response); });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">emiyaInstacne.render(canvasEl, { <span class="hljs-attr">width</span>: <span class="hljs-number">300</span>, <span class="hljs-attr">quality</span>: <span class="hljs-number">.8</span> }, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">response</span>) </span>{ <span class="hljs-built_in">console</span>.log(response); });</code></pre> <p><strong>response</strong> 返回格式如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="{ base64: '', // 修正过后图片的 base64 值 width: 300, // 画布宽度 height: 300 // 画布高度 }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>{ base64: <span class="hljs-string">''</span>, <span class="hljs-comment">// 修正过后图片的 base64 值</span> width: <span class="hljs-number">300</span>, <span class="hljs-comment">// 画布宽度</span> height: <span class="hljs-number">300</span> <span class="hljs-comment">// 画布高度</span> }</code></pre> <p><strong>参数说明</strong></p> <table> <thead> <tr> <th align="left">参数</th> <th align="center">参数类型</th> <th align="left">说明</th> </tr> </thead> <tbody> <tr> <td align="left">canvasEl</td> <td align="center"><a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>Element</td> <td align="left"> <code>必选</code> 需要渲染的canvas元素</td> </tr> <tr> <td align="left">options</td> <td align="center">Object</td> <td align="left"> <code>必选</code> 设置画布的一些参数 <code>width</code> 画布宽度 <code>quality</code> 图片质量,范围在 <code>0 - 1</code> 之间,默认值为 <code>0.8</code> </td> </tr> <tr> <td align="left">callback</td> <td align="center">Function</td> <td align="left"> <code>可选</code> 回调函数,返回了图片的 <code>base64</code> 值,与一些 <code>canvas</code> 的参数</td> </tr> </tbody> </table> <h4>github地址:<a href="https://github.com/Saberization/emiya-canvas" rel="nofollow noreferrer" target="_blank">https://github.com/Saberization/emiya-canvas</a><br /> </h4> <p><strong>觉得还不错就给个 <code>star</code> 呗~</strong></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过