0

i am working on rotating an image and and then converting that image to data string using html2canvas library's method toDataURL() and then sending this data to a php page through ajax. here's my code:

$(".gallery-item .active_icon .fa-repeat").click(function(){

    var rotate_btn_id = $(this).attr('id');
    var parent_name = "#gallery-item_for_"+rotate_btn_id;
    var img_id = "#img_for_"+rotate_btn_id;
    var img_format = $(img_id).attr("data-format");
    alert(rotate_btn_id+"  "+parent_name+"  "+img_id+"  "+img_format);

    tmpAnimation = tmpAnimation + 90;
    $(this).parents('.gallery-item').find('img').css({
        "-webkit-transform" : "rotate("+tmpAnimation+"deg)",
        "-moz-transform" : "rotate("+tmpAnimation+"deg)",
        "transform" : "rotate("+tmpAnimation+"deg)"
    });

    html2canvas($(img_id), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);
            //Convert and download as image
            var canvasData = canvas.toDataURL("image/png");
            window.open(canvasData, "_blank");
            console.log(canvasData);
            $.ajax({
                url: base + "/ajax/image_rotate.php",
                method: 'POST',
                data: { 'img_id': rotate_btn_id, 'img_data': canvasData},
                success: function(response) {
                    console.log(response);
                    location.reload(true);
                },
                error: function(xhr,status,error){
                    alert("xhr: "+xhr+"  status: "+status+"  error: "+error);
                }, 
            });
        }
    });
});

.fa-repeat is font awesome icon i am using as a button to rotate the image. The code is working fine till image rotation and problem occurs when i use toDataUrl(), it is not returning to proper string when i click on rotate. The string that is always returned with this function is

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFIklEQVR4Xu3VsRHAMAzEsHj/pTOBXbB9pFchyLycz0eAwFXgsCFA4C4gEK+DwENAIJ4HAYF4AwSagD9IczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhH4AStUAMmSuOW2AAAAAElFTkSuQmCC

and this data is giving blank image on decoding. So i want to know what i am doing wrong in this code and how can i rectify using this using same method ?

Anshul Joshi
  • 55
  • 1
  • 7
  • You are saying that if you do not rotate the image you can send data properly and decode it on other side with PHP? My question is, are you sure problem is in rotation? – ikiK Apr 28 '20 at 10:26
  • nope even if i comment the code for rotation the function is still giving same data url – Anshul Joshi Apr 28 '20 at 10:40
  • first make sure your code works without rotate, I had same problem fiew days ago. Took me a while but i fixed it; make sure you are decoding on other end properly: https://stackoverflow.com/a/61418366/7158959 you have my solution there and few helpful links. – ikiK Apr 28 '20 at 10:50
  • yeah I tried it without rotating image, still the function is producing same string – Anshul Joshi Apr 28 '20 at 11:38
  • About rotating, html2canvas works the way that it takes html and convert it, not sure that it takes in account your JS rotating aspect as it is client side. No sure about this but i think you need to somehow take that rotated picture and save it first then convert it into string. – ikiK Apr 28 '20 at 11:52
  • i think i got your point but how to save it in first place ? – Anshul Joshi Apr 28 '20 at 11:55
  • Not an JS expert, don't take anything I said to be true, but there is a thing called JS local storage, maybe look into that. – ikiK Apr 28 '20 at 12:00
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/212713/discussion-between-anshul-joshi-and-ikik). – Anshul Joshi Apr 28 '20 at 16:04

0 Answers0