图片旋转后保存base64

最新推荐文章于 2025-06-10 00:15:00 发布

原创最新推荐文章于 2025-06-10 00:15:00 发布 · 3.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#canvas图片旋转保存 #图片旋转后保存base64

canvas 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas实现图片的旋转，并将其转换为Base64字符串保存。详细讲解了绕中心旋转的解决方法，以及利用translate和rotate函数调整旋转中心。

图片旋转后保存base64——canvas

描述

图片旋转的如果不用保存的话，用css3就很简单了，至于用那些css3的属性和方法，自行在网上查。这里介绍用canvas 介绍图片旋转后保存base64。

思路

在canvas里进行图片旋转操作，然后用toDataURL保存base64字符串

解决绕中心旋转的问题

rotate()方法用于旋转当前绘制图。但是，你会发现它以绘制图的左上角为中心圆点进行旋转的。
解决：这时就用到translate(x,y) 平移绘制图到画布的中心点, 再使用旋转rotate(deg*Math.PI/180)，然后再translate(-x,-y)。再设置绘制图本身的x和y就可以了。代码如下：

var body = document.getElementsByTagName('body')[0],
    canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

    canvas.width = 500;
    canvas.height = 500;
    canvas.style.background = '#000';
// 设置矩形的坐标和宽高
var obj = {
        x: canvas.width/2,
        y: canvas.height/2,
        w: 200,
        h: 200,    
    };
ctx.fillStyle = '#fff';
// 设置旋转中心圆点到绘制的中心位置
ctx.translate(obj.x,obj.y);
ctx.rotate(45 * Math.PI/180);
ctx.translate(-obj.x, -obj.y);
ctx.fillRect(obj.x-obj.w/2, obj.y-obj.h/2, obj.w, obj.h);
body.appendChild(canvas);

旋转解决了

把矩形替换成图片就可以了。用到drawImage()方法和toDataURL()

<body>
	<img src="./images/res-pic.png" alt="" width="100%" id="temp-img" style="display:none;">
	<div class="canvas-box"></div>
</body>

<script>
var deg = 45,
      imgUrl = $('#temp-img').attr('src'),
      imgW = parseInt($('#temp-img').width()),
      imgH = parseInt($('#temp-img').height());
getBase64(imgUrl, imgW, imgH, deg)
function getBase64(imgUrl, imgW, imgH, deg) {
            //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
            var Img = new Image(),
                dataURL = '',
                deg = deg;
            Img.src = imgUrl;
            Img.onload = function () { //要先确保图片完整获取到，这是个异步事件
                var canvas = document.createElement("canvas"), //创建canvas元素
                    ctx = canvas.getContext("2d"),
                    //确保canvas的尺寸和图片一样
                    width = imgW,                                  
                    height = imgH,
                    w = deg % 180 == 0 ? width : height,
                    h = deg % 180 == 0 ? height : width,
                    obj = {
                        x: w / 2,
                        y: h / 2,
                        w: width,
                        h: height
                    };
                canvas.width = w;
                canvas.height = h;

                ctx.translate(obj.x, obj.y);
                ctx.rotate(deg * Math.PI / 180);
                ctx.translate(-obj.x, -obj.y);

                ctx.drawImage(Img, obj.x - obj.w / 2, obj.y - obj.h / 2, obj.w, obj.h); //将图片绘制到canvas中
                dataURL = canvas.toDataURL(); //转换图片为dataURL（转换成base64）
                $('.canvas-box').css({
                    'width': w,
                    'height': h
                }).html('');
                $('.canvas-box').append(canvas);
            };
            return dataURL
        }
       </script>