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

Question

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

1

Я разрабатываю редактор изображений, используя холст и ткань js.

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

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

rabash 22 авг. 2015, в 11:05

Источник

0

Хороший способ начать - просмотреть источники других пакетов для редактирования изображений, таких как github.com/Intervention/image
Sven van den Boogaart 22 авг. 2015, в 09:22

Теги:

php

javascript

canvas

html5-canvas

fabricjs

1 ответ

Ещё вопросы

Хороший способ начать - просмотреть источники других пакетов для редактирования изображений, таких как github.com/Intervention/image

V SH · Answer 1 · 2016-05-06T11-48-00.000Z

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>