根据字符串生成二维码图片

本文介绍了一种在iOS应用中生成二维码的方法,使用CoreImage框架的CIQRCodeGenerator过滤器,将输入的字符串转换为指定大小的二维码图像。文章详细解释了如何创建过滤器、设置参数、生成CIImage并将其转换为UIImage。

.h

//根据字符串生成指定大小的二维码
+ (UIImage *)createQRCodeImageWithMessage:(NSString *)message size:(CGFloat)size;

.m

#import <CoreImage/CoreImage.h>//用于生成二维码

//根据字符串生成指定大小的二维码
+ (UIImage *)createQRCodeImageWithMessage:(NSString *)message size:(CGFloat)size
{
    // 1.创建过滤器,这里的@"CIQRCodeGenerator"是固定的
    CIFilter *filter = [CIFilter filterWithName:@"CIQRCodeGenerator"];
    // 2.恢复默认设置
    [filter setDefaults];
    // 3. 给过滤器添加数据
    NSString *dataString = message;
    NSData *data = [dataString dataUsingEncoding:NSUTF8StringEncoding];
    // 注意,这里的value必须是NSData类型
    [filter setValue:data forKeyPath:@"inputMessage"];
    // 4. 生成二维码
    CIImage *outputImage = [filter outputImage];
    // 5. 输出二维码
    return [self creatNonInterpolatedUIImageFormCIImage:outputImage withSize:size];
}


/**
 根据CIImage生成指定大小的UIImage
 
 @param image CIImage
 @param size 图片宽度
 @return 生成的高清的UIImage
 */
+ (UIImage *)creatNonInterpolatedUIImageFormCIImage:(CIImage *)image withSize:(CGFloat)size
{
    CGRect extent = CGRectIntegral(image.extent);
    CGFloat scale = MIN(size/CGRectGetWidth(extent), size/CGRectGetHeight(extent));
    //1.创建bitmap
    size_t width = CGRectGetWidth(extent) * scale;
    size_t height = CGRectGetHeight(extent) * scale;
    CGColorSpaceRef cs = CGColorSpaceCreateDeviceGray();
    CGContextRef bitmapRef = CGBitmapContextCreate(nil, width, height, 8, 0, cs, (CGBitmapInfo)kCGImageAlphaNone);
    CIContext *context = [CIContext contextWithOptions:nil];
    CGImageRef bitmapImage = [context createCGImage:image fromRect:extent];
    CGContextSetInterpolationQuality(bitmapRef, kCGInterpolationNone);
    CGContextScaleCTM(bitmapRef, scale, scale);
    CGContextDrawImage(bitmapRef, extent, bitmapImage);
    //2.保存bitmap图片
    CGImageRef scaledImage = CGBitmapContextCreateImage(bitmapRef);
    CGContextRelease(bitmapRef);
    CGImageRelease(bitmapImage);
    return [UIImage imageWithCGImage:scaledImage];
}

 

转载于:https://www.cnblogs.com/cchHers/p/11164630.html

### 使用 Vue 生成二维码和条形码并实现下载 #### 插件介绍 为了在 Vue 项目中轻松创建二维码和条形码,可以使用 `qrcode` 和 `jsbarcode` 这两个 JavaScript 库。这些库提供了简单易用的方法来生成所需的编码。 对于二维码生成,推荐使用 `qrcode` 库[^1]。该库允许通过简单的 API 调用来创建自定义样式丰富的 QR Code 图像文件。而对于条形码,则可以选择 `JsBarcode` 库[^2],它支持多种类型的线性条形码格式,并且同样易于集成到前端应用当中。 #### 安装依赖项 首先,在命令行终端执行以下 npm 命令安装必要的包: ```bash npm install qrcode jsbarcode ``` #### 组件开发 接下来展示如何构建一个基本组件用于显示以及导出这两种形式的数据表示方式。 ##### HTML 结构 (template) ```html <template> <div class="code-generator"> <!-- 输入框 --> <input v-model="textToEncode" placeholder="Enter text or URL..." /> <!-- 切换按钮 --> <button @click="toggleType">Switch to {{ currentType === 'QR' ? 'Bar' : 'QR' }} code</button> <!-- 显示区域 --> <canvas id="qrCanvas"></canvas> <svg id="barSvg"></svg> <!-- 下载链接 --> <a :href="downloadLink" download="generated-code.png"><button>Download Image</button></a> </div> </template> ``` ##### Script 部分 ```javascript <script setup> import { ref, computed } from "vue"; import * as QRCode from "qrcode"; import JsBarcode from "jsbarcode"; // 数据绑定变量初始化 const textToEncode = ref(""); const currentType = ref('QR'); function toggleType() { currentType.value = currentType.value === 'QR' ? 'Bar' : 'QR'; } // 计算属性:动态设置 canvas 或 svg 的可见状态 const displayElementId = computed(() => `${currentType.value.toLowerCase()}${currentType.value === 'QR' ? 'Canvas' : 'Svg'}`); // 方法:更新画布上的内容 async function updateDisplayContent() { const element = document.getElementById(displayElementId.value); if (!element || !textToEncode.value.trim()) return; try { switch(currentType.value){ case 'QR': await QRCode.toCanvas(element, textToEncode.value); break; default: JsBarcode(element).clear().barcodes(textToEncode.value); } } catch(error) { console.error("Failed to generate the requested type of code.", error); } } watch([textToEncode,currentType],updateDisplayContent); // 导出图像链接计算属性 const downloadLink = computed(() => { let elem = document.querySelector(`#${displayElementId.value}`); if(!elem)return "#"; var dataURL; if(elem.tagName=="CANVAS"){ dataURL=elem.toDataURL(); }else{ var svgData= new XMLSerializer().serializeToString(elem); dataURL=`data:image/svg+xml;base64,${btoa(svgData)}` } return dataURL.replace("image/png", "image/octet-stream"); }); </script> ``` 此代码片段展示了如何在一个 Vue 单文件组件内完成从用户输入转换成可视化的二维/一维编码的过程,并提供了一个可点击的下载按钮让用户保存生成的结果作为图片文件。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值