canvas和图片之间的互相装换

canvas和图片之间的互相装换

一、总结

一句话总结：一个是canvas的drawImage方法，一个是canvas的toDataURL方法

canvas drawImage()

Image对象 canvas toDataURL()

1、使用JavaScript将图片拷贝进画布

canvas drawImage()

要想将图片放入画布里，我们使用canvas元素的drawImage方法：

1 // Converts image to canvas; returns new canvas element
2 function convertImageToCanvas(image) {
3     var canvas = document.createElement("canvas");
4     canvas.width = image.width;
5     canvas.height = image.height;
6     canvas.getContext("2d").drawImage(image, 0, 0);
7 
8     return canvas;
9 }

这里的0, 0参数画布上的坐标点，图片将会拷贝到这个地方。

2、用JavaScript将画布保持成图片格式

Image对象 canvas toDataURL()

如果你的画布上的作品已经完成，你可以用下面简单的方法将canvas数据转换成图片格式：

1 // Converts canvas to an image
2 function convertCanvasToImage(canvas) {
3     var image = new Image();
4     image.src = canvas.toDataURL("image/png");
5     return image;
6 }

这段代码就能神奇的将canvas转变成PNG格式！

二、ajax上传canvas装换的图片的实例

php代码（服务器上传图片代码）

    public function gojs_mindmap(){
        $base_img=$_POST['imageData'];
        //dump($base_img);die;
        //$base_img是获取到前端传递的值
        $base_img = str_replace('data:image/png;base64,', '', $base_img);
        //设置文件路径和命名文件名称
        //$path = ROOT_PATH . 'public' . DS . 'static/uploads/student/note/wpaint/';
        $path="./static/uploads/student/note/gojs_mindmap/";
        if(!file_exists($path)){
            mkdir ($path,0777,true);
        }
        $output_file = time().rand(10000,99999).'.png';
        $path = $path.$output_file;
        //  创建将数据流文件写入我们创建的文件内容中
        file_put_contents($path, base64_decode($base_img));
        $outPath="/static/uploads/student/note/gojs_mindmap/".$output_file;
        //dump($outPath);die;
        // 输出文件
        return $outPath;
        //print_r($output_file);
    }

jquery的ajax上传代码

    function gojs_upload_img(){
        //var gojs_image = new Image();
        var gojs_canvas=$('#myDiagramDiv canvas').get(0);
        //gojs_image.src = gojs_canvas.toDataURL("image/png");
        let imageData=gojs_canvas.toDataURL("image/png");

        $.ajax({
            url: '{:url("app/gojs_mindmap")}',
            data: {imageData: imageData},
            type: 'post',
            success: function(resp)
            {
                console.log(resp);
                $("input[name='a_content_mindmap_picture']").val(resp);
                alert('successfully uploaded image!');
            }
        });

        //console.log(gojs_canvas);
        //console.log(imageData);
    }

参考：用JavaScript将Canvas内容转化成图片的方法 – WEB骇客
http://www.webhek.com/post/convert-canvas-image.html