Edit the QR code online and send it to a thermal printer for printing

Online editing

JS plug-in used:

qrcodesvg

Draw QR code plug-in based on information colorPicker

Used for color selection, js binding event changes the color of QR code (svg) canvg

Used to convert the QR code in svg format into html5 canvas, and then use the toDataURL method to generate the base64 encoded data of the QR code image, and send it to the backend through Ajax Thermal printer prints QR code

The picture must be converted to BMP format. Classes for converting images to BMP:

/**
* class jpg, gif, png =========> BMP
*
* { Description :-
*   class that resize and convert jpg, gif or png to bmp
* }
* for more info contact with me (mahabub1212@yahoo.com)
* you can modify or use or redistribute this class.
*/
class ToBmp{

 // new image width
 var $new_width;

 // new image height
 var $new_height;

 // image resources
 var $image_resource;

 function image_info($source_image){
 $img_info = getimagesize($source_image);

 switch ($img_info['mime']){
 case "image/jpeg": { $this ->image_resource = imagecreatefromjpeg ($source_image); break; }
 case "image/gif": { $this->image_resource = imagecreatefromgif ($source_image); break; }
 case "image/png": { $this ->image_resource = imagecreatefrompng ($source_image); break; }
 default: {die("Image error");}
 }
 }


 public function imagebmp($file_path = ''){

 if(! $this->image_resource) die("Picture error");
 $picture_width = imagesx($this->image_resource);
 $picture_height = imagesy($this->image_resource);


 if(!imageistruecolor ($this->image_resource)){
 $tmp_img_resource = imagecreatetruecolor($picture_width,$picture_height);
 imagecopy($tmp_img_reource,$this->image_resource, 0, 0, 0, 0, $picture_width, $picture_height) ;
 imagedestroy($this->image_resource);
 $this->image_resource = $tmp_img_resource;

 }


 if((int) $this->new_width >0 && (int) $this- >new_height > 0){

 $image_resized = imagecreatetruecolor($this->new_width, $this->new_height);
 imagecopyresampled($image_resized,$this->image_resource,0,0,0,0 ,$this->new_width,$this->new_height,$picture_width,$picture_height);
 imagedestroy($this->image_resource);
 $this->image_resource = $image_resized;

 }

 $ result = '';

 $biBPLine = ((int) $this->new_width >0 &&(int)$this->new_height > 0) ? $this->new_width * 3 : $picture_width * 3;
 $biStride = ($biBPLine + 3) & ~3;
 $biSizeImage = ((int) $this->new_width >0 &&(int)$this->new_height > 0) ? $biStride * $this->new_height : $biStride * $picture_height;
 $bfOffBits = 54;
 $bfSize = $bfOffBits + $biSizeImage;

 $result .= substr('BM', 0, 2);
 $result .= pack ('VvvV', $bfSize, 0, 0, $bfOffBits);
 $result .= ((int) $this->new_width >0 &&(int)$this->new_height > 0 ) ? pack ('VVVvvVVVVVV', 40, $this->new_width, $this->new_height, 1, 24, 0, $biSizeImage, 0, 0, 0, 0) : pack ('VVVvvVVVVVV', 40, $picture_width, $picture_height, 1, 24, 0, $biSizeImage, 0, 0, 0, 0);

 $numpad = $biStride - $biBPLine;

 $h = ((int) $this->new_width >0 &&(int)$this->new_height > 0) ? $this->new_height : $picture_height;
 $w = ((int) $this->new_width >0 &&(int)$ this->new_height > 0) ? $this->new_width : $picture_width;

 for ($y = $h - 1; $y >= 0; --$y) {
 for ($x = 0; $x < $w; ++$x) {
 $col = imagecolorat ($this->image_resource, $x, $y);
 $result .= substr(pack ('V', $ col), 0, 3);
 }
 for ($i = 0; $i < $numpad; ++$i) {
 $result .= pack ('C', 0);
 }
 }


 if($file_path == ''){

 header("Content-type: image/bmp");
 echo $result;
 } else {

 $fp = fopen($file_path,"wb") ;
 fwrite($fp,$result);
 fclose($fp);
 //=============
 }


 return ;


 }
}

How to use

$ToBMP = new ToBmp();
$ToBMP->image_info($path_to_img);
$ToBMP->new_width = 255;
$ToBMP->new_height = 255;
$output_path = realpath( PATH.'test.bmp');
$ToBMP->imagebmp($output_path);

The BMP format has different data composition structures depending on the file header information

Mine is a 24-bit BMP. After removing 54 bytes of the header file, every three bytes (RGB) represent a point.

Combine RGB (three bytes into one byte) and then binarize the pixel (get 1 bit, that is, the point is black or white. The reason for binarization is because my thermal printer prints black and white but not color) .

Each 8bit is concatenated into 1 byte and expressed in the hexadecimal form of 'xx'. The data can be printed by sending it to the printer according to the interface provided by the printer.

pay attention:

1.Usage of unpack

$content = file_get_contents($path_to_img);
$content = unpack("H*", $content); //Get the hexadecimal representation of the image data

2.

‘xFE’ represents 4 characters

"xFE" represents 1 character (that is, the ascii code character corresponding to the hexadecimal number)

Single quotes can be converted using chr('0xFE')

Printer printing