图片转为canvas和canvas转为图片，可以用来给图片增加水印等操作

一个比较简单的小功能，直接上代码了

 window.onload = function(){
            var img1 = document.querySelector('#a');//一个原本就有的图片
            function convertImageToCanvas(image) {
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                canvas.getContext("2d").drawImage(image, 0, 0);//将图片转成canvas
                var ctx =  canvas.getContext("2d");
                ctx.font="30px Arial";
                ctx.strokeText("Hello World",10,50);//在canvas上增加水印文字
                return canvas;
            }
            var canvas = convertImageToCanvas(img1)
            document.body.appendChild(canvas)
            function convertCanvasToImage(canvas) {
                var image = new Image();
                // image.crossOrigin = 'Anonymous';//图片允许跨域的属性，按情况添加
                var src = canvas.toDataURL("image/png");//将canvas转为图片base64格式的，图片格式并不是非要png按具体需求修改
                
                image.src = src;
                return image;
            }
            document.getElementById('aaa').appendChild(convertCanvasToImage(canvas))

        }

上面三个图，第一个是原本的图片，第二个是canvas第三个是加了水印的img,

功能比较简单，水印的具体内容可以设置成变量接受，转为的图片格式也可以设置成动态形式