Luuman's Blog

因为有了危机感,所以会义无反顾。


  • Home

  • About

  • Archives

  • Search

浏览器常见Bug——Canvas

Posted on 2017-07-12 Edited on 2019-08-20 In Induce

自用笔记:本文属于自用笔记,不做详解,仅供参考。在此记录自己已理解并开始遵循的前端代码规范。What How Why

生成图片Canvas

toDataURL

Uncaught (in promise) DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.

问题原因:
Canvas为了安全性考虑,当绘制了外部图片后它会变成只可写不可读的状态,getImageData、toDataURL之类的试图读取数据的方法全都无法使用。理论上开启了CORS的资源应该被允许读取,只是IMG元素发起的请求默认并不带Origin字段,没能应用上CORS。

request Headers请求头Origin:

origin主要是用来说明最初请求是从哪里发起的;
origin只用于Post请求,而Referer则用于所有类型的请求;
origin的方式比Referer更安全点吧。

  • 基于 canvas 实现的一个截图小 demo
  • CORS与Canvas图片toDataURL

Access-Control-Allow-Origin

Access to Image at ‘http://wx4.sinaimg.cn/mw690/4b4d632fgy1fieo66xwy4j20io0goq46.jpg' from origin ‘http://172.16.20.115:8780' has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://172.16.20.115:8780' is therefore not allowed access.

CORS解决

前端实现’截图’效果的几种方式

html2canvas html截图插件图片放大清晰度解决方案,支持任意放大倍数,解决原插件图片偏移问题
html2canvas 将代码转为图片

# Hack
Vuex
WeChat SDK
  • Table of Contents
  • Overview

Luuman

爱折腾,爱运动,更爱游离于错综复杂的编码与逻辑中,无法自拔。相信编程是一门艺术,自诩为游弋在代码里的人生。
92 posts
19 categories
36 tags
友情链接
  • 编程の趣
  • 翁天信
  • MOxFIVE
  • Meicai
  1. 1. 生成图片Canvas
    1. 1.1. toDataURL
    2. 1.2. Access-Control-Allow-Origin
广告位 广告位 广告位
© 2019 Luuman
Powered by Hexo v3.9.0
|
Theme – Nice.Gemini v7.3.0