测试canvas绘制图片跨域demo

2020-05-29 14:36:47 阅读:4 编辑 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
</style>
<body>
<canvas id="myCanvas" width="500" height="500" style="background-color: yellow"></canvas>
</body>
</html>

<script>

    var count = 0;
    var finish_count = 0;
    var images = {};
    var c=document.getElementById("myCanvas");
    var t=c.getContext("2d");
    var cmds = "";
    var data = window.location.search.substr(6);
    var id = "";
    // data = data.substr(6);
    //data = decode(data);
    //setOption(decode(data));
    const image = new Image(10, 10);
    image.crossOrigin = 'Anonymous';
    //image.src = "https://oss.fzh.fun/images/1026/2019/12/Y2300l0vVMwi322CQlvl97a020A110.png?v=123";
    image.src = "https://zhyframe.fzh.fun/attachment/images/1023/2019/07/GF6aAAf06pefpqdEbnlTx0727z5dNe.jpg";
    image.onload = function () {
        //finish_count = finish_count+1;
        //images[img] = this;
        t.drawImage(this,0,0);
    }

</script>