图片旋转后保存base64 |
您所在的位置：网站首页 › canvas 旋转90度 › 图片旋转后保存base64 |
|
图片旋转后保存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() 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() 创建 省去了 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 } |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |