イオンプロジェクトで VintageJS で画像をフィルタリングしようとしています。しかし、base64でフィルタリングされた画像データを取得できません。イメージをキャンバスに保存し、キャンバスからデータを取得します。しかし、フィルター処理された画像ではなく、元の画像データを取得しています。:(これが私のコード部分です。
function initVImage() {
// image initialize
$scope.image = document.getElementById('my-photo');
$scope.image.src = ''+$scope.photo.uri + $scope.photo.name;
$scope.options = {
onError: function() {
alert('ERROR');
}
};
$scope.effect = {
vignette: 0.6,
sepia: true
};
}
$scope.imageProcess = function( num ){
initVImage();
$scope.effects = null;
if (num == EFFECT.NONE){
$scope.vimage.reset();
return;
}else if(num == EFFECT.VINTAGE){
$scope.effects = vintagePresets.vintage;
}else if(num == EFFECT.SEPIA){
$scope.effects = vintagePresets.sepia;
}else if(num == EFFECT.GREENISH){
$scope.effects = vintagePresets.greenish;
}else if(num == EFFECT.REDDISH){
$scope.effects = vintagePresets.reddish;
}else if(num == EFFECT.VIEWFINDER){
$scope.effects = vintagePresets.frameSet;
}
$scope.vimage = new VintageJS($scope.image, $scope.options, $scope.effects);
//var newFile = new File($scope.vimage, 'testImage.jpg');
updateFilteredImage($scope.image);
};
function updateFilteredImage( img_data ) {
var canvas = document.createElement('canvas');
var imageEle = img_data;
canvas.width = imageEle.width;
canvas.height = imageEle.height;
var context = canvas.getContext('2d');
context.drawImage(imageEle,0,0);
var base64Image = canvas.toDataURL('image/jpeg');
$scope.getImage = {
image : base64Image
};
}
これが私の結果画面です。フィルタリングされた画像を表示したい。しかし、元の画像が表示されています。
私はこのようにしたくない:
私を助けてください。高度な回答に感謝します.... :)