Question

嗨我在从图片标签下载图片时遇到问题，我用Google搜索但没有得到任何有效的解决方案。任何人都可以帮助解决这个问题.. 实际上我将一些bytestring绑定到图像标签src，就像这个

<img src="' + this.el.toDataURL("image/png") +'" class="img-responsive imgSmall" style="background-color:green;" alt="img" data-position-to="origin" data-transition="slide" id="signPrevwID_' + signatureid +'">

我正在下载相同的图片，背景色为绿色但不起作用，每次只保存背景颜色为黑色，下载我使用此代码

 var bannerImage = document.getElementById('signPrevwID_' + signatureid );
var imgData = getBase64Image(bannerImage);
console.log("imgData - "+imgData);
//alert("imgData - "+imgData);

 var newName = 'Test_' + new Date().getTime()+".png";

var fileWritter = new AppUtils.FileWritter(newName);
fileWritter.saveBase64ToBinary(imgData, function(r){
    console.log("saveBase64ToBinary() file saved");
  }, function(e){  
     console.log("saveBase64ToBinary() file not saved");
  });

var AppUtils2 = (function(){

//alert("AppUtils2");
// get the application directory. in this case only checking for Android and iOS
function localFilePath(filename) {
    if(device.platform.toLowerCase() === 'android') {
        return cordova.file.externalRootDirectory + filename;
    } else if(device.platform.toLowerCase() == 'ios') {
        return cordova.file.externalRootDirectory + filename;
    }
}

// FileWritter class
function FileWritter(filename) {
    //deleteStoredFromDevice(filename);
    this.fileName = filename;
    this.filePath = localFilePath(filename);

    alert("fileName - "+fileName);
}

// decode base64 encoded data and save it to file
FileWritter.prototype.saveBase64ToBinary = function(data, ok, fail) {
    var byteData = atob(data);

    var byteArray = new Array(byteData.length);

    for (var i = 0; i < byteData.length; i++) {
        byteArray[i] = byteData.charCodeAt(i);
    }

    var binaryData = (new Uint8Array(byteArray)).buffer;


   // createDirectory();
    this.saveFile(binaryData, ok, fail);
}

// save file to storage using cordova
FileWritter.prototype.saveFile = function(data, ok, fail) {
    this.fileData = data;

    var path = this.filePath.substring(0, this.filePath.lastIndexOf('/'));

    //console.log("saveFile() path - "+path);
    var that = this;

    // Write file on local system
    window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory+"Download/Mobitrac/Docs", function(directoryEntry) {
        var options = {create: true, exclusive: false};

        alert("that.fileName - "+cordova.file.externalRootDirectory+"Download/Mobitrac/Docs");

        directoryEntry.getFile(that.fileName, options, function(file) {

            alert("that.fileName - "+that.fileName);

            file.createWriter(function(writer) {
                writer.onwriteend = function(event) {
                    if(typeof ok === 'function') {
                        alert("onwriteend");
                        //viewing documents locally
                        //var fileWritter = new AppUtils.viewFile(subEventId+'.'+fileExtention);
                        ok(event);
                    }
                };

                writer.write(that.fileData);
            }, fail);
        }, fail);

    }, fail);
};  

/*// open InApp Browser to view file
function viewFile(filename) {
    //var path = localFilePath(filename);
    var path = cordova.file.externalRootDirectory+"Download/Mobitrac/Docs/"+filename;
    alert("viewFile() path - - "+path);
    window.open(path, "_system", "location=yes,hidden=no,closebuttoncaption=Close");
}

return {
    FileWritter: FileWritter,
    localFilePath: localFilePath,
    viewFile: viewFile
}*/
 })();
   var fileExtention = '';


function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;

var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

var dataURL = canvas.toDataURL("image/png");

console.log("data - "+dataURL);

  return dataURL.replace(/^data:image\/(png);base64,/, "");
}

使用sketch.js画布元素的字节字符串，我的意思是我在画布上画一些东西并将相同的图像添加到背景颜色为绿色的html中的img标签。

我没有从破碎的地方开始，请任何人帮助我

从带有背景颜色的图片代码下载图片

0 个答案: