Canvas understanding

1. What is`Canvas`

CanvasYes HTML5, a new feature, canvasalso known as the drawing board, we can canvasdraw the graphics we need on it. Why does it appear canvas? Because HTMLthere is no set of two-dimensional plots in API. It is an element Canvasitself , and the height and width attributes of the element are required to define a drawable area. After defining the area, the script can be used to draw the image element.HTMLHTMLJavascriptHTML

It can basically draw graphics, go further to make animations, and go a step further to process and render videos

2. Basic usage

By canvasdrawing a rectangle, the two necessary steps are: ① create canvasa canvas, ② obtain canvasthe context, and select the corresponding one according to the content to be drawnCanvas API

Canvas APIChinese document

<body>
    <!-- 创建canvas画布 -->
    <canvas id="canvas" width="500" height=""500></canvas>
    <script>
        // 获得canvas 元素
        const canvas =document.getElementById("canvas");
        // 获得canvas上下文（相当于画笔）
        const ctx=canvas.getContext("2d");
        // 设置填充颜色
        ctx.fillStyle="green";
        // 绘制矩形，起点位置(10,10),宽150，高100
        ctx.fillRect(10,10,150,100);
    </script>
</body>

operation result:

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-Q4UXvZe9-1652605422613)(image-20220515163451015.png)]

3. Picture operation

<body>
  <canvas id="canvas"></canvas>
  <script src="./js/util/util.js" type="module"></script>
</body>

export function blur(src) {
    
    
    //设置 canvas 画布
    const canvas = document.querySelector("#canvas");
    canvas.width = 100;
    canvas.height = 100;
    // 获得 canvas 上下文
    const ctx = canvas.getContext("2d");
  
    //Image()函数将会创建一个新的HTMLImageElement实例。它的功能等价document.createElement('img')
    const img = new Image();
    img.src = src;
    // 添加属性crossorigin，增加img元素的跨域支持，设置值为anonymous，表示对此元素的 CORS 请求将不设置凭据标志
    img.setAttribute("crossorigin", "anonymous");
    //当img元素加载完成时执行
    img.onload = function () {
    
    
      const {
    
     width, height } = canvas;
      //图片裁剪操作
      ctx.drawImage(img, 0, 0, img.width, img.height, 5, 5, width, height);
    };
  }
  
  const src =
    " https://tse1-mm.cn.bing.net/th?id=OIP.M2dHJdmuNPhuODWuMLIK_gHaEo&w=170&h=106&c=8&rs=1&qlt=90&dpr=1.25&pid=3.1&rm=2 ";
  blur(src);

operation result:

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-VOTSOUd8-1652605422614)(image-20220515164534497.png)]

In the js code segment, you can see that there is a line

 img.setAttribute("crossorigin", "anonymous");

What's wrong with not adding this line of code? At this time, the picture will not be displayed because it canvasis polluted. Next, let’s talk about what is canvaspollution

4. `canvas`Pollution

Draw a cross-domain picture on canvasthe top, this canvasis polluted, and canvasthe data at this time cannot be read

This is a restriction of the same-origin policy, in order to prevent third-party websites from reading image data from other websites ( Canvasthe rendering of third-party images CORSis not restricted , to avoid user privacy leakage)

How do we solve this problem? The first thing to judge is whether you can control the response of the picture.

If you can control the image response, use the method mentioned above, use CORScross-domain, and increase when the image request is initiatedcrossOrigin = "Anonymous"
If not, you can only act as an agent on your own website, so that the website and the pictures have the same source