Cordova 如何从相机旋转图片
Posted
技术标签:
【中文标题】Cordova 如何从相机旋转图片【英文标题】:Cordova how to rotate a picture from camera 【发布时间】:2015-08-27 06:28:34 【问题描述】:我用科尔多瓦相机插件拍照 camera.getPicture() 接口
并获得一个 base64 图像我如何将这个 base64 图像向右旋转 90 并获取新的 base64 字符串以保存 我的代码:
Camera.getPicture(options).then(function(imageURI)
var img = new Image();
img.src = "data:image/png;base64," + imageURI;
var rotate = false;
if (img.width > img.height)
rotate = true;
uploadImage(imageURI, activeIndex, rotate);
, function(err)
console.log(err);
$ionicLoading.hide();
);
图片旋转功能
var rotateImage = function (base64ImageSrc)
var canvas = document.createElement('canvas');
var img = new Image();
img.src = base64ImageSrc;
var context = canvas.getContext('2d');
// translate context to center of canvas
context.translate(canvas.width / 2, canvas.height / 2);
// rotate 45 degrees clockwise
context.rotate(Math.PI / 4);
console.log(canvas.toDataURL());
var ImageUrl = canvas.toDataURL();
ImageUrl = ImageUrl.split("data:image/png;base64,");
ImageUrl = ImageUrl[1];
console.log(ImageUrl);
return ImageUrl;
;
【问题讨论】:
【参考方案1】:可以使用画布实现图像旋转,
function rotateBase64Image()
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = base64data;
image.onload = function()
ctx.translate(image.width, image.height);
ctx.rotate(180 * Math.PI / 180);
ctx.drawImage(image, 0, 0);
window.eval(""+callback+"('"+canvas.toDataURL()+"')");
;
base64data:包含base64编码的照片图像[原始图像]的字符串
canvas.toDataURL():旋转图像
Refer
【讨论】:
它的返回图像 base64 字符串但很短,所以看起来没问题以上是关于Cordova 如何从相机旋转图片的主要内容,如果未能解决你的问题,请参考以下文章