Как сохранить только изображение холста, а не все холсты

Question

У меня есть canvas 800x600, и я использую fabricjs, чтобы добавить одно изображение (200 x 200).

Я применяю несколько фильтров на своем изображении, и я хотел бы сохранить его, но на данный момент я сохраняю холст 800x600, и я хотел бы просто сохранить изображение после эффектов.

Возможно ли это?

Answer 1

Вы можете использовать метод canvas.toDataURL FabricJS, который работает так же, как HTML в canvas.toDataURL

var dataURL = myFabricCanvas.toDataURL(); 

Если вы хотите вашего пользователя, чтобы сохранить их холст на их локальном диске, вы можете сделать это:

• Создайте изображение с холста.
• Открыть это изображение в новом окне браузера
• Have пользователя правой кнопкой мыши и сохранить, как образ

Вот код:

var win=window.open(); 
win.document.write("<img src='"+myFabricCanvas.toDataURL()+"'/>"); 

Примечание: если ваше изображение размещается на в другом домене, чем ваш .html, вы получите ошибку безопасности CORS, и canvas.toDataURL не удастся.

Answer 2

Попробуйте

<button class="btn btn-success" id="rasterize">Convert Image To PNG</button> 


//************************canvas to png image********** 
    document.getElementById('rasterize').onclick = function() { 
    if (!fabric.Canvas.supports('toDataURL')) { 
     alert('This browser doesn\'t provide means to serialize canvas to an image'); 
    } 
    else { 

     window.open(canvas.toDataURL('png')); 
     var gh=(canvas.toDataURL('png'));+ 
     alert(gh); 
    } 
    }; 
    //--------------end canvas to png image----------------------- 

Answer 3

От последней версии (скачать и скомпилировать его из GitHub), и это является то, что вы хотите:

canvas.toDataURL(left, top, width, height); 

Проверьте вопрос fabric.js - create Image object from ImageData object of canvas API для единственного комментария kangax в.