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

 

 

 

转载于:https://www.cnblogs.com/Renyi-Fan/p/10145028.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值