JavaScript — как редактировать изображение, которое сохраняется с помощью редактора
Я занимаюсь разработкой графического редактора с использованием Canvas и Fabric JS.
У меня вопрос, как я могу редактировать изображение, которое сохраняется с помощью редактора. Я должен изменить расширение при сохранении изображения или что?
Поэтому, пожалуйста, если кто-нибудь знает о проблеме, пожалуйста, помогите мне. Спасибо заранее.
Решение
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>Другие решения
Других решений пока нет …
detector