JavaScript — как редактировать изображение, которое сохраняется с помощью редактора

Question

JavaScript — как редактировать изображение, которое сохраняется с помощью редактора

Я занимаюсь разработкой графического редактора с использованием Canvas и Fabric JS.

У меня вопрос, как я могу редактировать изображение, которое сохраняется с помощью редактора. Я должен изменить расширение при сохранении изображения или что?

Поэтому, пожалуйста, если кто-нибудь знает о проблеме, пожалуйста, помогите мне. Спасибо заранее.

1

canvas fabricjs html5-canvas javascript php

Решение

По вопросам рекламы [email protected]

Accepted Answer

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 50, width:100, height:100, top: 100, angle: 00}).scale(0.5);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({ format: 'jpeg', quality: 0.8 });

console.log("Canvas Image " + dataURL);
document.getElementById('txt').href=dataURL;
});
};
reader.readAsDataURL(file);


});

 canvas{
border: 1px solid black;
}

  <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>
<input type="file" id="file">
<a href='' id='txt'>Click Me!!</a>

0

Другие решения

Других решений пока нет …

Источник