Как сохранить изображение с закругленными углами, используя todataUrl?

Мне нужно сохранить изображения, нарисованные (из кодировки base64) на холсте с закругленными углами. Холст определяется с помощью:

<canvas id="thumbnailImage" width="86" height="86" style="border:1px solid #d3d3d3;border-radius:10px;">

Изображение выглядит так, как ожидалось (используя ctx.drawImage и т. д.), с закругленными углами. Затем я получаю данные кодирования base64 округленного изображения, используя

        var imageData = $(jImageId)[0].toDataURL("image/jpeg",qly);

К сожалению, когда изображение отображается без холста с закругленными углами, углы все еще там...

Вопрос: есть ли простой способ получить данные изображения base64 в том виде, в каком они отображаются на холсте, или мне нужно пройти через болезненное испытание с отсечением пикселей?

Спасибо !


canvas html base64 image-processing image-clipping
person Alex    schedule 06.09.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Кажется, что радиус границы - это просто стиль HTML, а не данные изображения внутри холста, поэтому вам придется стереть угол, чтобы получить закругленное изображение.

После поиска я нашел эти сообщения который научил меня стирать форму, а не просто переплетать, так что начнем:

JSFiddle (хотя это не будет работать с финальной частью экспорта из-за ограничения COR)

ctx.drawImage(src,0,0);
ctx.save();
ctx.globalCompositeOperation="destination-out";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(10,0);
ctx.arcTo(0,0,0,10,10);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(100,0);
ctx.lineTo(90,0);
ctx.arcTo(100,0,100,10,10);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(0,90);
ctx.arcTo(0,100,10,100,10);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(90,100);
ctx.arcTo(100,100,100,90,10);
ctx.closePath();
ctx.fill();
ctx.restore();
des.src=can.toDataURL("image/png");

Основывайтесь на том, что вы уже знаете радиус закругленного угла.

Вот скриншот результата на моем локальном хосте:

результат локального хоста

person Passerby    schedule 06.09.2013
comment
Спасибо за подробный ответ, очень полезно! - person Alex; 07.09.2013