Начало Към постинга

Новина от дневника:

тщ напълно пренаписах paste хендлъра

стария имаше огромен проблем - опитваше се да ме прекара през CORS за изображения които съм копнал от друга страница, минавайки през оригиналното им URL при условие че в клипборда я има самата картинка която искам да пейстна. За картинки които не идват от барузер работи ок, но по-често са от браузера и подобно поведение нервеше.

При Paste tinymce се правят на умни и не ми пускат картинката, ами html formata, който то намира в клипборд, решава, че е по-добре да ползва него и ми засилва него. Това е генерално тъпо, защото тоя html сочи към картинка от друг домейн и естествено КОРС-а не пуска изображението и за да го излъжа се налагаше да отворя ирфана и да пейстна и после да копирам от него за да остане в клипборда само картинката без html кода.

ето как изглежда клипборда при една такава картинка, копната от уебстраница. Има BITMAP и DIB които са едно и също, а също има и HTML Format и URL.

вместо да ми извади DIB TinyMCE ми вади HTML Format и ми го пуска в Paste plugin, при което аз го прехващах при paste_preprocess - там се опитвах да обърна получения <img src=....> до картинка и КОРС-а се намесваше.

сега в setup callbacka на tinymce се закачам on('paste'..) и сам си проверявам какво има в клипбоарда. ако има файл от тип image/png (заб: при копване в клипборда, всяка картинка се обръща до такъв тип) се получи следния пинг-понг, за да получа заветния jpg:

  • вземам го с getAsFile() - получавам блоб от общ тип (text/plain)
  • обръщам му типа до image/png, защото то си е такова, получавам пнг блоб
  • вземам урл до този пнг блоб
  • чрез това урл правя jpg. като резултат получавам url като data, която е base64 encoded (за да стане номера минавам през канвас и гетвам датата с качество на жепега 90%)
  • обръщам този data url до блоб
  • вземам урл на блоба
  • вмъквам картинка в tinymce сочеща към това url на jpg blob.

в основни линии кода е този: 

 

function toJpg(src, callback)
{
  varimg=newImage();
  img.crossOrigin='anonymous';
  img.onerror= (err, status) =>console.log(err, status);
  img.onload=function() {
    var canvas= document.createElement('CANVAS');
    var ctx=canvas.getContext('2d');
    var dataURL;
    canvas.height =this.height;
    canvas.width =this.width;
    ctx.drawImage(this, 0, 0);
    dataURL=canvas.toDataURL('image/jpeg', 0.9);
    callback(dataURL);
  };
  img.src=src;
}
function dataURItoBlob(dataURI)
{
    return fetch(dataURI, {mode: 'cors'})
        .then(res => res.blob());
}
function blobToDataURI(blob)
{
    return URL.createObjectURL(blob);
}
 
.......................
//tinymce init options:
        setup : function(ed) {
         ed.on('paste',function(ev) {
             console.log("onpaste",ev.clipboardData.items);
             for(var i in ev.clipboardData.items)
                if(ev.clipboardData.items[i].type=='image/png')
                {
                    let file = (ev.clipboardData.items[i].getAsFile());
                  let blobpng = file.slice(0, file.size-1, 'image/png'); //change type to png
                    let urlPngBlob = blobToDataURI(blobpng);
                    toJpg(urlPngBlob, dataURL =>
                    {
                        dataURItoBlob(dataURL).then(blob => {
                            var url = URL.createObjectURL(blob);
                            insertImgUrlInTinyMce(url);
                        });
                    });
                    ev.preventDefault();
                }
         });
        },
......................
 

Коментари:

Засега няма коментари касаещи тази новина.

Вашият коментар:

Име:
Сайт:
Допустими тагове:

<b> <i> <big> <pre>
[youtube]youtube_video_id[/youtube]
[vbox7]vbox7_video_id[/vbox7]
[img500]imgurl[/img500]