使用 p5js 脚本进行 NFT？答案

【问题标题】：Use p5js script for an NFT?使用 p5js 脚本进行 NFT？
【发布时间】：2021-10-07 21:57:00
【问题描述】：

我看到人们将这种方法用于基于 SVG 的 NFT：

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

但是，由于我不想生成固定图像，我该如何使用我的 p5js 脚本（每次运行 js 代码时看起来略有不同）？有没有办法以某种方式将种子传递给我的脚本，并将传递给它的种子的脚本存储在链上？

【问题讨论】：

标签： javascript blockchain solidity p5.js nft

【解决方案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

【讨论】：