Преобразование PNG Base-64 в строку TIFF Base-64

Question

Я использую плагин, который возвращает строку base64 с кодировкой PNG, я не могу ее изменить, я должен работать с ней, но мне действительно нужно значение tiff закодированное (основание 64). Есть ли способ сделать это?

Я попытался создать холст, загрузить png base64, а затем использовать toDataURL('image/tiff'), но после некоторых исследований я обнаружил, что tiff не поддерживается как вывод toDataURL().

Любые предложения?

Answer 1

Как TIFF обычно не поддерживается в качестве целевого файла формата в браузере, вам придется вручную кодировать файл TIFF путем создания файла-структуры с использованием типизированных массивов и в соответствии с file specifications (см Photoshop notes здесь). Это doable:

• Получить сырой RGBA растрового изображения из холста (помните, что вопросы CORS)
• Использование типизированным массивам с точки зрения DataView, чтобы иметь возможность записывать различные данные по выровненным позициям
• Создайте заголовок файла, определить минимальный набор TAGS и кодирование данных RGBA так, как вам нужно (несжатый просто реализовать или простое сжатие RLE).
• Построить окончательный буфер файлов. Отсюда у вас есть ArrayBuffer, который вы можете передать в виде байтов, необязательно:
• Преобразование в Blob с ArrayBuffer и tiff mime-type.
• Преобразовать в Data-URI, используя в качестве основы ArrayBuffer

Updatecanvas-to-tiff может быть использован для сохранения холста, как TIFF изображений (оговорка: Я автор).

Чтобы получить Data-URI, используя холст-к-размолвки вы можете просто сделать:

CanvasToTIFF.toDataURL(canvasElement, function(url) { 
    // url now contains the data-uri. 
    window.location = url; // download, does not work in IE; just to demo 
}); 

Хотя, я бы рекомендовал использовать toBlob(), или если вы хотите, чтобы дать пользователю ссылку, toObjectURL() (вместо toDataURL).

Демонстрация с помощью Data-URI

var c = document.querySelector("canvas"), 
 
    ctx = c.getContext("2d"); 
 

 
// draw some graphics 
 
ctx.strokeStyle = "rgb(0, 135, 222)"; 
 
ctx.lineWidth = 30; 
 
ctx.arc(200, 200, 170, 0, 2*Math.PI); 
 
ctx.stroke(); 
 

 
// Covert to TIFF using Data-URI (slower, larger size) 
 
CanvasToTIFF.toDataURL(c, function(url) { 
 
    var a = document.querySelector("a"); 
 
    a.href = url; 
 
    a.innerHTML = "Right-click this link, select Save As to save the TIFF"; 
 
})

<script src="https://cdn.rawgit.com/epistemex/canvas-to-tiff/master/canvastotiff.min.js"> 
 
</script> 
 
<a href=""></a><br> 
 
<canvas width=400 height=400></canvas>

Demo с использованием объектно-ориентированного URL-адрес

var c = document.querySelector("canvas"), 
 
    ctx = c.getContext("2d"); 
 

 
// draw some graphics 
 
ctx.strokeStyle = "rgb(0, 135, 222)"; 
 
ctx.lineWidth = 30; 
 
ctx.arc(200, 200, 170, 0, 2*Math.PI); 
 
ctx.stroke(); 
 

 
// Covert to TIFF using Object-URL (faster, smaller size) 
 
CanvasToTIFF.toObjectURL(c, function(url) { 
 
    var a = document.querySelector("a"); 
 
    a.href = url; 
 
    a.innerHTML = "Right-click this link, select Save As to save the TIFF"; 
 
})

<script src="https://cdn.rawgit.com/epistemex/canvas-to-tiff/master/canvastotiff.min.js"> 
 
</script> 
 
<a href=""></a><br> 
 
<canvas width=400 height=400></canvas>