I have a canvas and in the canvas I want to load an image.
client.js
game.viewport = document.getElementById('viewport');
game.card1 = document.getElementById('card1');
//Adjust their size
game.viewport.width = game.world.width;
game.viewport.height = game.world.height;
game.card1.width = game.cards.width;
game.card1.height = game.cards.height;
//Fetch the rendering contexts
game.ctx = game.viewport.getContext('2d');
game.ctx2 = game.card1.getContext('2d');
game_core.js
game_core.prototype.client_cards = function(game_instance) {
this.instance = game_instance;
var img = new Image();
img.src = '/images/Chainlinks/AddBurn.png';
this.ctx2.drawImage(img,10,20);
this.ctx2.fillStyle = 'rgba(255,255,255,0.7)';
this.ctx2.fillText('Summoner: '+player1, 10 , 20);
The text Summnor2: is visible in the canvas but the image isn't drawed. If I look in de cmd of node.js he finds the image path. so I really don't know where it goes wrong.
Try something like this. Make sure image path is correct.
var self = this;
var img = new Image();
img.src = './images/Chainlinks/AddBurn.png';
img.onload = function() {
self.ctx2.drawImage(img,10,20);
self.ctx2.fillStyle = 'rgba(255,255,255,0.7)';
self.ctx2.fillText('Summoner: '+player1, 10 , 20);
};
Related
I am working on a node+express backend.
I am receiving base64 images string from API and I am storing it into MongoDB. Before storing I want to reduce the image size (scaling). I tried JIMP but it is not reading base64 input.
Can anyone please suggest any good node module which accepts base64 image, scale it and return a new base64 string.
Thanks
A little late but I just implemented this feature using the sharp library, so might as well share it now.
I created a function that takes a base64 and the height and width (optional) you want to resize the image to and returns the resized base64 string.
I can just call this function whenever I want.
Code
// Don't forget to import sharp
import sharp from "sharp"
export const resizeBase64 = async ({ base64Image, maxHeight = 640, maxWidth = 640 }) => {
const destructImage = base64Image.split(";");
const mimType = destructImage[0].split(":")[1];
const imageData = destructImage[1].split(",")[1];
try {
let resizedImage = Buffer.from(imageData, "base64")
resizedImage = await sharp(resizedImage).resize(maxHeight, maxWidth).toBuffer()
return `data:${mimType};base64,${resizedImage.toString("base64")}`
} catch (error) {
throwError({ error })
}
};
You can still use JIMP, but all you need to do is to drop the prefix before reading the base64.
Depend on your image format use a specific jpg or png in the following example.
Example:
Jimp.read(Buffer.from((yourImageBuffer).replace(/^data:image\/png;base64,/, ""), 'base64'), function (err, image) {
// Do you stuff here with the image
})
....some logic....
let max_width = 371;
let max_height = 280;
var image = new Image();
image.src = YOUR_BASE64_STRING;
let image_width = image.width;
let image_height = image.height;
let ratio = 1;
if(image_width > max_length || image_height > max_length){ //need to scale
ratio = max_length / image_width;
if(image_height > image_width){
ratio = max_length / image_height;
}
}
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = image_width * ratio; // target width
canvas.height = image_height * ratio; // target height
ctx.drawImage(image,
0, 0, image.width, image.height,
0, 0, canvas.width, canvas.height
);
var RESIZED_BASE64_STRING = canvas.toDataURL();
....some logic....
var json = [];
json.push(json2);
function makeallImage(){
console.log('json length'+json.length);
for (var v = 0; v < json.length; v++){
convertImgToBase64(v, "jpg");
console.log("ksana"+v);
}
}
function convertImgToBase64(number, outputFormat){
var tmpData =
canvas.loadFromJSON(json[number], canvas.renderAll.bind(canvas), function(){
**//need to absolute comfirm it add all object in canvas, load complete json2 //**
canvas.on('object:added', function(e) {
toImg();
});
});
}
function toImg(outputFormat){
var s = document.getElementById("last_Image");
var url = canvas.toDataURL();
var newImg = document.createElement("img"); // create img tag
console.log(newImg);
newImg.src = url;
newImg.width = 100;
newImg.height = 100;
s.appendChild(newImg);
console.log('mpike sto dom');
}
i am using this code to create image to field , problem is if my json object contain image ,it will create empty image. so i figure it out is because loading the src need time and canvas create image before it fully load.
i need to make sure the json fully loaded on canvas first , so i found a fabric code call object:added , which can make sure object added in canvas , but it count object one by one , so if my json cotain 2 object it will create more image.
achievement
1. i need to make sure my json fully load or create in canvas before create image , is they any way to make sure json fully added to canvas?
Demo see my problem using object:added it load multiple image.
You should dump reviver and use just the callback function.
http://jsfiddle.net/v1nmtz02/2/
You will have some difficulties with fabricImages and objects that have a content that is async. That is not yet solved at library level.
function _callback() {
canvas.renderAll();
toImg();
}
function convertImgToBase64(number, outputFormat){
var tmpData = canvas.loadFromJSON(json[number], _callback);
}
Complete snippet:
var canvas = new fabric.Canvas('canvas');
var json2 = '{"objects":[{"type":"circle","originX":"center","originY":"center","left":300,"top":400,"width":200,"height":200,"fill":"rgb(166,111,213)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"#5b238A","blur":20,"offsetX":-20,"offsetY":-10},"visible":true,"clipTo":null,"radius":100},{"type":"rect","originX":"center","originY":"center","left":300,"top":500,"width":150,"height":150,"fill":"#fbb802","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"rgba(94, 128, 191, 0.5)","blur":5,"offsetX":10,"offsetY":10},"visible":true,"clipTo":null,"rx":0,"ry":0,"x":0,"y":0}],"background":""}';
var json = [];
json.push(json2);
function makeallImage(){
for (var v = 0; v < json.length; v++){
convertImgToBase64(v, "jpg");
}
}
function _callback() {
canvas.renderAll();
toImg();
}
function convertImgToBase64(number, outputFormat){
var tmpData = canvas.loadFromJSON(json[number], _callback);
}
function toImg(outputFormat){
var s = document.getElementById("last_Image");
var url = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = url;
newImg.width = 100;
newImg.height = 100;
s.appendChild(newImg);
}
<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id='canvas' width="550" height="550" style="border:#000 1px solid;"></canvas>
<button onclick="makeallImage();">makepng</button>
<div id="last_Image" style="background:red"></div>
Good evening, community.
I have a question regarding changing exif meta data on jpegs using node.js. I have a set of coordinates which I need to attach to the image file, but for some reason, I cannot find the right library on npm for that. There are plenty of extracting libraries, like exif, exif-js, no-exif and so on, but all of the are retrieving data from images. I'm going the opposite direction, and extracting coordinates/gps data from the kml file and based on that updating the images, which do not have geo-location metadata.
What is the best approach for doing this?
I have written a library to modify exif on client-side. It would help you even on Node.js.
https://github.com/hMatoba/piexifjs
I tried to run the library on Node.js. No error occurred and got a new jpeg modified exif.
var piexif = require("piexif.js");
var fs = required("fs");
var jpeg = fs.readFileSync(filename1);
var data = jpeg.toString("binary");
var exifObj = piexif.load(data);
exifObj["GPS"][piexif.GPSIFD.GPSVersionID] = [7, 7, 7, 7];
exifObj["GPS"][piexif.GPSIFD.GPSDateStamp] = "1999:99:99 99:99:99";
var exifbytes = piexif.dump(exifObj);
var newData = piexif.insert(exifbytes, data);
var newJpeg = new Buffer(newData, "binary");
fs.writeFileSync(filename2, newJpeg);
This worked best for me. eg. to write a coordinate of 23.2342 N, 2.343 W
const piexifjs = require("piexifjs");
var filename1 = "image.jpg";
var filename2 = "out.jpg";
var jpeg = fs.readFileSync(filename1);
var data = jpeg.toString("binary");
var exifObj = piexif.load(data);
exifObj.GPS[piexif.GPSIFD.GPSLatitude] = degToDmsRational(23.2342);
exifObj.GPS[piexif.GPSIFD.GPSLatitudeRef] = "N";
exifObj.GPS[piexif.GPSIFD.GPSLongitude] = degToDmsRational(2.343);
exifObj.GPS[piexif.GPSIFD.GPSLongitudeRef] = "W";
var exifbytes = piexif.dump(exifObj);
var newData = piexif.insert(exifbytes, data);
var newJpeg = Buffer.from(newData, "binary");
fs.writeFileSync(filename2, newJpeg);
function degToDmsRational(degFloat) {
var minFloat = degFloat % 1 * 60
var secFloat = minFloat % 1 * 60
var deg = Math.floor(degFloat)
var min = Math.floor(minFloat)
var sec = Math.round(secFloat * 100)
deg = Math.abs(deg) * 1
min = Math.abs(min) * 1
sec = Math.abs(sec) * 1
return [[deg, 1], [min, 1], [sec, 100]]
}
I have seen SVG images on wikipedia which you can open in notepad and find the code written inside it. My question is if I make a circle in raphael, can I display it as an svg image in the browser?
var p = paper.circle(10,10,10).attr({fill:'blue'});
then display it as a svg image in my browser. How can I achieve it?
This would only work on browsers that support SVG. I think it fails on IE9 too because it doesn't provide support for .serializeToString() (though there are shims for this).
window.onload = function () {
var paper = Raphael("container", 100, 100);
var p = paper.circle(10,10,10).attr({fill:'blue'});
var textarea = document.getElementById("code")
var serializer = new XMLSerializer();
textarea.value = serializer.serializeToString(paper.canvas);
};
See demo here: http://jsfiddle.net/BvWkU/
window.onload = function () {
var paper = Raphael("container", 100, 100);
var p = paper.circle(10,10,10).attr({fill:'blue'});
var textarea = document.getElementById("code")
var serializer = new XMLSerializer();
textarea.value = serializer.serializeToString(paper.canvas);
};
Updated: webOS version 2.1...
This base64 encoded image data generates the correct data image when I append it to the source of an image, like this:
var img = new Image();
img.src= data
var data = "data:image/png;base64,iVBORw0KGgoAAAANSUh
EUgAAAJYAAACmCAIAAAC3GeEYAAEkgklEQVR4AQD9/wIAADt8Fj5/GUSA IESAIEN/GUd/H0V+IEaEIE
WFHUOEHEqJIE2KIk2KI1GQKFSQLFaQKlaOKVaQKlORLlaYLVaVKFWV KVWUKliWKFiXJlKVIliTJW2oP
m6jOW+kPGqkPmehPWWePWagOmmjP2ykQ2ulQmylRWykQmqmP2qr QGqnP26qSGyvRmquQWyyQGquP2yu
RHSzSHWwSXGxSGytRG+vSG6vSW2vRWquRGqtRGmsQnO1R3Gw SG+rSXavUXWwUnKqR3CuRWquP26zQ3C
yRXK0SHG0SWupR2qoR3CuS2qrQ3CsSG6vS22pR26qSGyq RWetO22uQ2yqP22wRGetP2yyP4TEWgElAB
UrBRYmAx05AidHBB9MCydRDylSGChWGCZUFyFLEyNK Ex5IDBtJBhc/Bx9FDBxDDh5HDyRGExs8DRs4D
B04DRw8Exo6DxMuBw8kAhEeABIYAQ4VABAUAA0S AAwVAg8bAw0bAgwaAxAYAAULAQgQAQcQBQsPAAwQ
AggMAwMLAQAIAAgOBAYOAAsWBg4bChMgDxUk DxcmERopEh8vFBwuExspEhcnDxUpDhcqERUnDhUnDRQ
rDxgsERgvEx8xGQA+fxk7gxU9hBc9ghg/ gR1CgBxBhBtChRxIhyFMiyNMiyNNjiZNiypRkCpSjydRkC
VVkSpTkihYmi9YlC9XlCxVlClYlixW lSpZlS1eli16skJnqDxppj1qpDxmpD9mpD1loj1opz9qqENvq
Udpp0FmqD9npkFtpUVvp0ZvrUVs q0NsrEFtrURsrkBrsT9vskFvrj5srz5ssUJsrkJsrkNtr0NusEVm
qjxrrz5ttkNquEFqtEFu"
I am trying to save the image using my custom service, but it does not save the correct image. Here is the Node.js code for saving the image:
var fs = IMPORTS.require('fs');
var path = IMPORTS.require('path');
var buff = new Buffer(img.substr('data:image/png;base64,'.length), 'base64');
path.exists('/media/internal/wallpapers/', function(exists){
if (exists) {
var id = fs.openSync('/media/internal/wallpapers/i.png', 'w', 666);
var written = fs.writeSync(id, buff,0, buff.length, 0);
fs.closeSync(id);
}
});
The saved version of the image has totally different pixel values.
EDIT
I came to find out that the image data above isn't correct. I am using a PNG library to generate base64 image data of a canvas pixel array. The link is http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/.
That is an alternative to canvas.toDataURL();. webOS does not support toDataURL, so I had to use a library.
Here is the code I have used with this library to manipulate my canvas image data as a pixel array:
EditorAssistant.prototype.getDataURL = function(width,height,pixelArray) {
var p = new PNGlib(height, width, 256); // Construcor takes height, weight and color-depth.
var background = p.color(0, 0, 0, 0);
var k = 0;
for (var j = 0; j<height; j++) {
for (var i =0; i<width; i++) {
var x =i;
var y =j;
p.buffer[p.index(x,y)] = p.color(pixelArray[k], pixelArray[k+1], pixelArray[k+2]);
k+=4;
}
}
return 'data:image/png;base64,'+p.getBase64() ;
}
Does this library work and where am I doing it wrong?
libpng.js only supports 256 color images, so that may be the problem. There are other base64 encoding utilities which may work as expected.