將 p5js 腳本用於 NFT？

Question

我見過有人將這種方法用於基於 SVG 的 NFT：

function p5jsToImageURI(){
    string memory baseURL = "data:image/svg+xml;base64,PUT-BASE64-HERE"
}

但是，由於我不想生成固定圖像，我該如何使用我的 p5js 腳本（每次運行 js 代碼時看起來都略有不同）？ 有沒有辦法以某種方式將種子傳遞給我的腳本，並將傳遞給它的種子的腳本存儲在鏈上？

Answer 1

var img,inpt,div

function convertImgToDataURLviaCanvas(url, callback, outputFormat){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    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(outputFormat);
        callback(dataURL);
        canvas = null; 
    };
    img.src = url;
}

function convertFileToDataURLviaFileReader(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
        var reader  = new FileReader();
        reader.onloadend = function () {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.send();
}


function img2b64(imagefile){
    var imageUrl = imagefile;
    var convertType = 'Canvas';    
    var convertFunction = convertType === 'FileReader' ?  convertFileToDataURLviaFileReader :   convertImgToDataURLviaCanvas;
    convertFunction(imageUrl, function(base64Img){
        code='foto = "'+base64Img+'";'
        inpt.value(code)
        div.html('<img src="'+base64Img+'">');  
     });
}



function setup() {
  but = createButton("CONVERT");
  but.mousePressed(function () {
      img2b64('nature100b.jpg');

  });
  inpt = createP('');
  inpt = createElement("textarea",'');
  inpt.elt.rows = 5;
  inpt.elt.cols = 50;
  div = createDiv('');

}

試試這個https://editor.p5js.org/josepssv/full/wsCZnJqkA