<!DOCTYPE HTML>
<html>
<head>
<script>
function draw(f) {
var cnv = document.createElement('canvas'),
ctx = cnv.getContext("2d"),
rdr = new FileReader(),
im = new Image(),
ext = format.value;
rdr.onload = function() {
im.onload = function() {
cnv.width = this.width;
cnv.height = this.height;
ctx.drawImage(this, 0, 0);
image.src = picture.innerHTML = cnv.toDataURL(ext)
}
im.src = this.result
}
rdr.readAsDataURL(f)
}
</script>
</head>
<body>
<select id="format">
<option value="image/png">Format PNG</option>
<option value="image/jpeg">Format JPEG</option>
</select>
<input type="file" onchange="draw(this.files[0])" />
<div><img id="image" /></div>
<div id="picture"></div>
</body>
</html>
Как видим, возвращается выбранный формат. Если взять ответ канвы (содержимое picture без data:image/jpeg;base64) и сохранить его, например используя РНР:
file_put_contents('img.jpg', base64_decode(ответ_канвы))
то будет сохранено изображение именно JPEG. Это можно даже проверить так - сохранить полученный jpeg ответ канвы с расширением png и gif. Программы (тот же Проводник, отображение значков), которые определяют изображение не по расширению, а по заголовкам, будут отображать эти изображения без проблем, даже с некорректным расширением. А те что ориентируются на расширение, нет, например, попробуйте открыть их в Фотошоп.
То есть с методом toDataURL(ext) все в порядке, как заказали так и работает. А вот
"пытаюсь сохранить", то есть отослать готовое на сервер (?), то это нужно смотреть как это организовано плагином. Работа канвы, это не только drawImage() и toDataURL(), можно получить изображение в буфер и вытворять с ним все что угодно. А программы работающие с графикой работают или с сырыми данными (RAW) или с обработанными, но распакованными. Видеокартам JPEG, PNG и прочий зоопарк тоже не нужен, все распаковывается предварительно и затем подается на соответствующие видео страницы. В среде windows изображения, это аппаратно-независимый раст DIB (Device-Independed Bitmaps).
А для хранения и передачи изображения сжимают с целю уменьшения объема данных, и на каком этапе плагин это делает, и он ли вообще в этом виновник, как это сохраняется, нужно разбираться. Мне этим заниматься некогда, да и не и охота.
Вы используете этот плагин только лишь для того, чтобы поместить на картинку текст?